<template>
  <view class="container">
    <!-- 页面头部标题 -->
    <view class="new-page-header">
      <!-- 状态栏占位 -->
      <view class="new-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏 -->
      <view class="new-nav-bar" :style="{ height: navBarHeight + 'px' }">
        <!-- 返回按钮 -->
        <view class="new-back-button" @click="goBack">
          <u-icon name="arrow-left" size="36" color="#ffffff"></u-icon>
        </view>
        <!-- 标题 -->
        <view class="new-header-title" :style="{ lineHeight: navBarHeight + 'px' }">服务协议</view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view style="padding: 30rpx">
      <rich-text :nodes="content"></rich-text>
    </view>
  </view>
</template>

<script>
import navbarMixin from "@/common/mixin/navbar.js";
import { getArticle } from "@/api/index.js";
import { addImageDomainPrefix } from "../../utils/util";

export default {
  mixins: [navbarMixin],

  data() {
    return {
      content: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    await getArticle({
      id: 7,
    }).then((res) => {
      this.content = addImageDomainPrefix(res.content);
    });
  },

  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    return {
      title: "服务协议",
      path: "/pages/newagreement/index",
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-content {
  padding: 40rpx;

  .content-item {
    margin-bottom: 30rpx;

    .content-text {
      font-size: 32rpx;
      color: #333333;
      line-height: 1.6;
    }
  }
}
</style>
